﻿var enums = {
	visibleTo: {
		everybody: 1,
		friends: 2,
		family: 3,
		friendsOrFamily: 4,
		nobody: 5
	}
};

var dom = {
	get: function(id) { return document.getElementById(id); },
	clone: function(id) { return this.get(id).cloneNode(true); },
	append: function(id, node) { this.get(id).appendChild(node); },
	createDialog: function(id, title) { return new dialogObject(id, title); },
	createImage: function(url, options) {
		var image = document.createElement('img');
		image.setAttribute('src', url);
		return image;
	},
	createList: function(id, options, changeHandler) {
		var list = this.create('select');
		if (options && typeof(options) == 'object') {
			for (key in options) { list.append(key, options[key]); }
		}
		if (changeHandler) { list.addEventListener('change', changeHandler, false); }
		return list;
	},
	createButton: function(id, name, clickHandler) {
		var node = this.create('input', {
			'type': 'button',
			'id': id,
			'value': name
		});
		node.onClick(clickHandler);
		return node;
	},
	createTriangle: function(width, length, direction, color) {
		var canvas = document.createElement('canvas');
		if (direction == 'up' || direction == 'down') {
			canvas.width = width;
			canvas.height = length;
		} else {
			canvas.width = length;
			canvas.height = width;
		}
		var ctx = canvas.getContext('2d');
		ctx.beginPath();
		
		switch (direction) {
			case 'up': {
				ctx.moveTo(width/2, 0);
				ctx.lineTo(width, length);
				ctx.lineTo(0, length);
			}
			case 'down': {
			
			}
			case 'left': {
			
			}
			case 'right': {
			
			}
		}
		ctx.fillStyle = color;
		ctx.fill();
		return canvas;
	},
	create: function(tag, options) {
		var node = document.createElement(tag);
		if (options && typeof(options) == 'object') {
			if (options.cssClass) { node.className = options.cssClass; }
			if (options.type) { node.setAttribute('type', options.type); }
			if (options.value) { node.setAttribute('value', options.value); }
			if (options.id) { node.id = options.id; }
		}
		return node;
	},
	ready: function(callback) {
		document.addEventListener('DOMContentLoaded', callback);
	}
}

var ti = {
	format: {
		date: function(d) {
			// eg. 2010-10-16 09:25:48
			d = d.substring(0, d.lastIndexOf(' '));
			var part = d.split('-');
			var month = ['January','February','March','April','May','June','July','August','September','October','November','December'];
			return month[(part[1] * 1) - 1] + ' ' + (part[2] * 1) + ', ' + part[0];
		},
		text: function(raw) { return raw; }
	},
	data: {
		get: function(key) {
			return window.localStorage.getItem(key);
		},
		set: function(key, value) {
			if (typeof(value) != 'string') { value = JSON.stringify(value); }
			window.localStorage.setItem(key, value);
		},
		getObject: function(key) {
			var value = this.get(key)
			try {
				return JSON.parse(value);
			} catch(error) {
				console.log('Unable to JSON.parse() ' + JSON.stringify(value));
				return null;
			}
		},
		remove: function(key) {
			if (typeof(key) == 'string') { 
				window.localStorage.removeItem(key);
				return;
			} else if (key.isArray()) {
				for (var i = 0; i < key.length; i++) {
					window.localStorage.removeItem(key[i]);
				}
			}
		}
	},
	isArray: function(o) { return (o.constructor.toString().indexOf('Array') > -1); },
	alert: function(message, title) { window.alert(title + ': ' + message); },
}

HTMLInputElement.prototype.disable = HTMLSelectElement.prototype.disable = function() {
	this.setAttribute('disabled','disabled');
	return this;
}
HTMLInputElement.prototype.check = function() {
	this.setAttribute('checked','checked');
	return this;
}
HTMLInputElement.prototype.uncheck = function() {
	this.removeAttribute('checked');
	return this;
}
HTMLInputElement.prototype.enable = HTMLSelectElement.prototype.enable = function() {
	this.removeAttribute('disabled');
	return this;
}
HTMLInputElement.prototype.onClick = function(handler) {
	this.addEventListener('click', handler, false);
	return this;
}
HTMLSelectElement.prototype.append = function(text, value) {
	var option = dom.create('option');
	option.text = text;
	option.value = value;
	this.add(option, null);
	return this;
}
HTMLSelectElement.prototype.selected = function() {
	return this.options[this.selectedIndex];
}
HTMLSelectElement.prototype.setSelected = function(value) {
	for (var i = 0; i < this.options.length; i++) {
		this.options[i].selected = (this.options[i].value == value);
	}
	return this;
}
HTMLDivElement.prototype.positionBy = function(node, offsetTop, offsetLeft) {
	if (node) {
		var size = new sizeObject(node);
		this.style.top = size.bottom + ((offsetTop) ? offsetTop : 0) + 'px';
		this.style.left = size.left + ((offsetLeft) ? offsetLeft : 0) + 'px';
	}
	return this;
}
HTMLCanvasElement.prototype.drawTriangle = function(color) {
	
}

HTMLElement.prototype.append = function(list) {
	if (list) {
		if (ti.isArray(list)) {
			for (var i = 0; i < list.length; i++) { this.appendChild(list[i]); }
		} else if (typeof(list) == 'object') {
			this.appendChild(list);
		} else if (typeof(list) == 'string') {
			this.innerHTML = list;
		}
	}
	return this;
}
HTMLElement.prototype.remove = function() {
	if (this.parentNode) { this.parentNode.removeChild(this); }
}

HTMLElement.prototype.hide = function() {
	this.style.display = 'none';
	return this;
}
HTMLElement.prototype.show = function() {
	this.style.display = 'block';
	return this;
}
HTMLElement.prototype.get = function(id) {
	return document.getElementById(id);
}
HTMLElement.prototype.getImage = function(url) {
	var images = this.getElementsByTagName('img');
	for (var i = 0; i < images.length; i++) {
		if (images[i].src.indexOf(url) != -1) { return images[i]; }
	}
	return null;
}

HTMLElement.prototype.appendToPage = function() {
	var body = document.getElementsByTagName('body')[0];
	body.appendChild(this);
	return this;
}
HTMLElement.prototype.setAttributes = function(attributes) {
	if (attributes && typeof(attributes) == 'object') {
		for (var a in attributes) { this.setAttribute(a, attributes[a]); }
	}
	return this;
}
HTMLElement.prototype.html = function(text) {
	if (text) {
		this.innerHTML = text;
		return this;
	} else {
		return this.innerHTML;
	}
}
HTMLElement.prototype.addClass = function(name) {
	if (this.className) { name = ' ' + name; }
	this.className += name;
	return this;
}

HTMLElement.prototype.removeClass = function(name) {
	var re = new RegExp('\s*' + name + '\s*');
	this.className = this.className.replace(re, '');
}

function dialogObject(id, title) {
	var _this = this;
	var _spinner = dom.createImage(chrome.extension.getURL('library/spinner.gif'));
	var _body = dom.create('div', { cssClass: 'dialog' });
	var _title = dom.create('h1');
	var _status = dom.create('h2');
	var _triangle = dom.createTriangle(20, 20, 'up', '#ddd');
	var _cancelButton = dom.createButton('cancel-button', '×', function(e) {
		_this.close();
	});
	_cancelButton.setAttribute('title','Close');
	_spinner.className = 'spinner';
	if (title) { _title.innerHTML = title; }
	_body.id = id;
	_body
		.append([_title, _spinner, _cancelButton, _triangle, _status])
		.appendToPage();
		
	this.close = function() { _body.remove(); }
	this.title = function(text) { _title.innerHTML = text; return _this; }
	this.status = function(text) {
		_status.innerHTML = text;
		if (text) { _status.show(); }
		return _this;
	}
	this.positionBy = function(node, offsetTop, offsetLeft) {
		_body.positionBy(node, offsetTop, offsetLeft);
		return _this;
	}
	this.append = function(list) { _body.append(list); return _this; }
	this.showProgress = function() { _spinner.show(); }
	this.hideProgress = function() { _spinner.hide(); }
}

function sizeObject(node) {
	this.top = node.offsetTop;
	this.left = node.offsetLeft;
	this.width = node.offsetWidth;
	this.height = node.offsetHeight;
	
	while (node.offsetParent) {
		node = node.offsetParent;
		this.top += node.offsetTop;
		this.left += node.offsetLeft;
	}
	this.bottom = this.top + this.height;
	this.right = this.left + this.width;
}